<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
        <title>爱音乐春季运动会</title>
        <link rel="stylesheet" href="./lib/jquery/jquery.mobile-1.4.5.min.css">
        <style>
            input:focus{
            -moz-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            -webkit-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            }
            .ui-block-a, .ui-block-b,.ui-block-c{
                height: 43px;
                font-weight: bold;
                padding: 10px;
            }
            ul li{
                list-style:none;
                line-height: 37px;
                padding:5px;
                margin-bottom: 5px;
            }
        </style>
        <script src="./lib/jquery/jquery-1.9.1.min.js"></script>
        <script src="./lib/jquery/jquery.mobile-1.4.5.min.js"></script>
        <script src="tool/share.js"></script>
    </head>
<body>

<img src="image/pointerup.png" style="position: fixed;left:91%;z-index: 999;width: 8%;display: none" id="pointerup">
<div data-role="page" style="background-image: url(images/luckypage.png);background-repeat: no-repeat;background-size:cover;">
    <div data-role="main" class="ui-content" style="position:fixed;top:50%;width: 280px;border-radius: 34px;border:1px solid #ddd;background-color: rgba(246, 246, 246, 0.47);left: 50%;padding: 0;overflow: hidden;margin-top: -215px;margin-left: -140px;">
        <a href="#" style="padding: 0;position: relative;top:12px;float: right;right: 10px;" onclick="window.location.href='lucky.html';"><img src="./images/close.png" style="width: 30px;"></a>
        <div style="text-align: center;line-height: 7px;margin-top: 18%;position: relative;">
            <p>恭喜你获得电信免费彩铃<p>
            <p style="font-size: 22px;color: red;">可任选一首歌免费订购</p>
        </div>
        <ul data-role="none" style="padding: 0;" id="songlist"> 
            <li style="background-color: rgba(255, 255, 255, 0.4);">
                <input type="hidden" value="810028436322" name="crbtId"/>
                <a href="javascript:void(0)" style="float: left;" class="play"><img src="image/play.png" style="width: 34px;" data-name="play" data-status="play" data-audio="1" /></a>
                <span style="margin-left: 10px;">相见恨晚</span>
                <a href="#" style="float: right;" class="buy"><img src="image/buy.png" style="width: 99px;" /></a>
            </li> 
            <li> 
                <input type="hidden" value="810028436303" name="crbtId"/>
                <a href="javascript:void(0)" style="float: left;" class="play"><img src="image/play.png" style="width: 34px;"  data-name="play" data-status="play" data-audio="2"/></a>
                <span style="margin-left: 10px;">放手去爱吧</span>
                <a href="#" style="float: right;" class="buy"><img src="image/buy.png" style="width: 99px;" /></a>
            </li> 
            <li style="background-color: rgba(255, 255, 255, 0.4);"> 
                <input type="hidden" value="810028436318" name="crbtId"/>
                <a href="javascript:void(0)" style="float: left;" class="play"><img src="image/play.png" style="width: 34px;"  data-name="play" data-status="play" data-audio="3"/></a>
                <span style="margin-left: 10px;">远方</span>
                <a href="#" style="float: right;" class="buy"><img src="image/buy.png" style="width: 99px;" /></a>
            </li> 
            <li> 
                <input type="hidden" value="810028436320" name="crbtId"/>
                <a href="javascript:void(0)" style="float: left;" class="play"><img src="image/play.png" style="width: 34px;"  data-name="play" data-status="play" data-audio="4"/></a>
                <span style="margin-left: 10px;">白天不懂夜的黑</span>
                <a href="#" style="float: right;" class="buy"><img src="image/buy.png" style="width: 99px;" /></a>
            </li> 
            <li style="background-color: rgba(255, 255, 255, 0.4);"> 
                <input type="hidden" value="810028436316" name="crbtId"/>
                <a href="javascript:void(0)" style="float: left;" class="play"><img src="image/play.png" style="width: 34px;"  data-name="play" data-status="play" data-audio="5"/></a>
                <span style="margin-left: 10px;">全世界宣布爱你</span>
                <a href="#" style="float: right;" class="buy"><img src="image/buy.png" style="width: 99px;" /></a>
            </li> 
        </ul> 
    </div>
    <div id="musiclist">
        
    </div>
    <a href="#" style="position: absolute;left: 25%;bottom: 5%;" onclick="showShare();"><img src="images/xuanone.png" style="width: 160px"></a>
</div>

<script type="text/javascript">
    function stopBubble(e) {

        // 如果提供了事件对象，则这是一个非IE浏览器

        if ( e && e.stopPropagation ) {

            // 因此它支持W3C的stopPropagation()方法

            e.stopPropagation();

        } else {

            // 否则，我们需要使用IE的方式来取消事件冒泡

            window.event.cancelBubble = true;

        }

    }
    $(document).ready(function(){
        setTimeout(function(){
            var htmlDom = '<audio src="http://dl.118100.cn/res/V/2130/mp3/50/71/65/2130507165040800.mp3?ts=2216" id="audio1"></audio>'
            +'<audio src="http://dl.118100.cn/res/V/2130/mp3/50/71/46/2130507146040800.mp3?ts=48360" id="audio2"></audio>'
            +'<audio src="http://dl.118100.cn/res/V/2130/mp3/50/71/61/2130507161040800.mp3?ts=4180" id="audio3"></audio>'
            +'<audio src="http://dl.118100.cn/res/V/2130/mp3/50/71/63/2130507163040800.mp3?ts=1457" id="audio4"></audio>'
            +'<audio src="http://dl.118100.cn/res/V/2130/mp3/50/71/59/2130507159040800.mp3?ts=52140" id="audio5"></audio>';
            $("#musiclist").append(htmlDom);            
        },500);
        $("li").each(function(){
            var li = this;
            $(this).find('a.play').click(function(e) {
                stopBubble(e);
                var crbtId = $(this).find('input[name=crbtId]').val();
                var play = $(this).find('img[data-name=play]')[0];
                var i = play.getAttribute("data-audio");
                if(play.getAttribute("data-status")=="play"){
                    $("img[data-status=pause]").click();
                    play.src = "image/pause.png";
                    play.setAttribute("data-status","pause");
                    $("#audio"+i)[0].play();
                }else{
                    play.src = "image/play.png";
                    $("#audio"+i)[0].pause();
                    play.setAttribute("data-status","play");
                }
                return false;
            });
            $(this).find('a.buy').click(function(e) {
                var crbtId = $(li).find('input[name=crbtId]').val();
                window.location.href = './ringtonebuy.html?crbtId='+crbtId;
            });
        });        
    });
</script>

</body>
</html>
